<template>
   <div class="search-head">
      <form action="/">
        <van-search
          v-model="keyword"
          show-action
          :placeholder="recomWord"
          @search="onSearch"
          @cancel="onCancel"
          @input="getHelpList"
          @focus="showList"
          @blur="isShowList = false"
        />
      </form>
      <transition name="van-fade">
        <van-list class="search-list" v-if="isShowList">
          <van-cell 
            v-for="item in searchHelp" :key="item" :title="item"
            @click="$emit('needSearch',{keyword:item})" />
        </van-list>
      </transition>
    </div>
</template>

<script>
  export default {
    props: ['recomWord'],
    data() {
      return {
        isShowList:false, // 是否显示实时搜索提示列表
        searchHelp:[], // 搜索提示关键字
        keyword:""
      }
    },
    methods: {
      onCancel() {
        //返回首页
        this.$router.push("/home")
      },
      // 搜索按钮
      async onSearch(keyword){
        if(keyword == ""){
          keyword = this.recomWord
        }
        this.$emit("needSearch",keyword)
      },
            
      // 显示提示列表
      getHelpList(){
        if(this.keyword === "") {
          this.isShowList = false
          return
        }
        // 发送实时关键字获取请求
        this.getHelpData()
        if(this.isShowList === true) return
        this.isShowList = true
      },
      // 第一次点击显示提示
      showList(){
        this.getHelpData()
        this.isShowList = true
      },
      // 获取提示关键字
      async getHelpData(){
        const {data} = await this.$api.searchHelp({keyword:this.keyword})
        this.searchHelp = data
      },
    },
  }
</script>

<style scoped>
    .search-head{
    position: relative;
  }
  .search-list{
    position: absolute;
    top:.54rem;
    left: 0;
    right: 0;
    z-index: 4444;
    background-color: white;
  }
</style>